<!-- 用于显示一些特殊的控件 -->
<template>
    <!-- 悬浮窗控件 -->
    <div v-if="!!suspensionData && !suspensionData.eles.hidden" :style="suspensionStyle" class="right-fixed-wrap">
        <widget-view :element="suspensionData" hide-drag-btn />
    </div>

    <!-- 收缩悬浮窗控件 -->
    <div v-if="!!newSuspensionData && !newSuspensionData.eles.hidden" :style="newSuspensionStyle" class="right-fixed-wrap">
        <widget-view :element="newSuspensionData" hide-drag-btn />
    </div>

    <!-- 侧边栏控件 -->
    <template v-for="(item, index) in sidebarList" :key="index">
        <div v-if="!item.eles.customFeature.widgetHidden && !item.eles.hidden" class="center-fixed-wrap">
            <widget-view :element="item" hide-drag-btn />
        </div>
    </template>

    <!-- 弹窗控件 -->
    <template v-for="(item, index) in popupWindowList" :key="index">
        <div v-if="!item.eles.customFeature.widgetHidden && !item.eles.hidden" class="center-fixed-wrap">
            <widget-view :element="item" hide-drag-btn />
        </div>
    </template>
</template>

<script>
import { defineComponent, computed } from 'vue'
import useWidget from '@/libs/edit/widgetData'
export default defineComponent({
    name: 'EditMainSpecialWidgets',
    setup() {
        const {
            widgetList
        } = useWidget()
        
        // 悬浮窗控件数据
        const suspensionData = computed(() => widgetList.value.find(item => item.eles.type === 'suspension'))
        const suspensionStyle = computed(() => {
            if (!suspensionData.value) return {}
            const style = suspensionData.value.eles.style || {}
            const customFeature = suspensionData.value.eles.customFeature || {}
            return {
                right: style.right,
                bottom: customFeature.bottom,
                top: customFeature.top
            }
        })

        // 收缩悬浮窗控件数据
        const newSuspensionData = computed(() => widgetList.value.find(item => item.eles.type === 'new-suspension'))
        const newSuspensionStyle = computed(() => {
            if (!newSuspensionData.value) return {}
            const style = newSuspensionData.value.eles.style || {}
            const customFeature = newSuspensionData.value.eles.customFeature || {}
            if (customFeature.showSuspensionStatus === 1) {
                return {
                    right: customFeature.navigationRight,
                    bottom: customFeature.navigationBottom
                }
            } else if (customFeature.showSuspensionStatus === 2) {
                return {
                    right: style.right,
                    bottom: style.bottom
                }
            }
            return {}
        })

        // 侧边栏控件列表
        const sidebarList = computed(() => widgetList.value.filter(item => item.eles.type === 'sidebar'))

        // 侧边栏控件列表
        const popupWindowList = computed(() => widgetList.value.filter(item => item.eles.type === 'popup-window'))

        return {
            suspensionData,
            suspensionStyle,

            newSuspensionData,
            newSuspensionStyle,
            
            sidebarList,

            popupWindowList
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-main-special-widgets.less';
</style>